<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .menu {
            width: 100%;
            display: flex;
            position: fixed;
            left: 0;
            bottom: 0;
        }

        .item {
            flex: 1;
            background-color: black;
            color: cadetblue;
            text-align: center;
            line-height: 40px;
        }

        .menu .active {
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="menu" v-show="flag">
            <div class="item" v-for="item in list" :class="{active:item.id == activeIndex}">
                <router-link :path="item.path">{{item.msg}}</router-link>
            </div>
        </div>
        <router-view :com="com"></router-view>
    </div>
</body>
<template id="routerview">
    <component :is="com"></component>
</template>
<template id="routerlink">
    <span>
        <a :href="'#'+path">
            <slot></slot>
        </a>
    </span>

</template>
<script>
    let routerLink = {
        props:["path"],
        template:"#routerlink"
    }

    let com1 = {
        template: "<div>组件一的内容</div>"
    }
    let com2 = {
        template: "<div>组件二的内容</div>"
    }
    let com3 = {
        template: "<div>组件三的内容</div>"
    }
    let com4 = {
        template: "<div>404</div>"
    }

    let routerView = {
        template: "#routerview",
        props:["com"],
        components: {
            com1,
            com2,
            com3,
        }

    }


    new Vue({
        el: "#app",
        data: {
            activeIndex: 1,
            flag: true,
            com: "com1",
            list: [{ id: 1, msg: '菜单一', path: "/com1", com: "com1" }, { id: 2, msg: '菜单二', path: "/com2", com: "com2" }, { id: 3, msg: '菜单三', path: "/com3", com: "com3" }]
        },
        components: {
            routerView,
            routerLink,
            com4
        },
        methods: {
            change(item) {
                this.activeIndex = item.id;
                this.com = item.com;
            }
        },
        mounted() {//同步页面结构加载完成

            window.onhashchange = () => {//箭头函数  this指向上下文关系对象（vue实例）
                let hash = window.location.hash;//获取hash值
                //更加hash指 找到组件信息
                // console.log(hash);
                let path = hash.substring(1);//去除#

                let infoList = this.list.filter(item => item.path == path);//集合
                if (infoList.length) {
                    let info = infoList[0];//找到以后 调用事件
                    this.change(info);
                    this.flag = true;
                } else {
                    this.com = "com4";
                    this.flag = false;
                }


            }



        }

    })

</script>

</html>